<template>
    <div class="xl-form min" :style="loading?{height:defH+'px'}:''" style="padding:8px;" ref="module-content"
         v-loading="loading">
        <div v-for="(res,j) in result" :key="j">
            <div class="xl-field-module" v-for="(rec,i) in res.records" :key="'item_img_'+i" v-if="rec.index<showSize">
                <div class="field-items xl-col-24  d-flex" v-if="!rec.msg">
                    <i class="xl-field-detail" v-if="show" @click="(e)=>{handle(rec,i,res)}">详情</i>
                    <div class="xl-col-sm-8 xl-col-8 xl-field-content" style="width:100px">
                        <!-- <img class="img" :src="item[field.tableField]||defaultImg" @error="error" alt="无法加载图片！"
                              v-for="(field,i) in heads" :key="'field_img_'+i" v-if="field.fieldType=='img'">-->
                        <div class="img-prev" v-if="field.fieldType==='img'" v-for="(field,i) in res.fields" :key="'field_img_'+i">
                            <CustomImg :item="rec" :field=field @push="pushPromise" ></CustomImg>
                        </div>
                        <span class="bjmc">
                            <img :src="require('@/assets/newstar.png')" :alt="rec.bjmc" v-if="rec.bjmc">
                        </span>
                    </div>
                    <div class="xl-col-sm-16 xl-col-16 xl-field-content">
                        <div class="xl-form" style="padding: 0;">
                            <div class="field-item slots" v-if="$scopedSlots.field">
                                <div v-for="(field,i) in res.fields" :key="i" v-if="field.fieldType!=='img'">
                                    <slot :data="{
                                    item:rec,
                                    fieldIndex:i,
                                    field:field
                                }" name="field"></slot>
                                </div>
                            </div>
                            <div class="field-item" v-else :key="j+'_noname'">
                                <div v-if="module.component==='ryjbxx'">
                                     <span v-if="field.fieldType!=='img'" v-for="(field,j) in res.fields">
                                        <fieldUname :item="rec" :field="field" v-if="j<5" :renderer="renderer"></fieldUname>
                                        <field :item="rec" :field="field" v-else></field>
                                    </span>
                                </div>
                                <div v-else>
                                    <span v-if="field.fieldType!=='img'" v-for="(field,j) in res.fields">
                                        <field :item="rec" :field="field"></field>
                                    </span>
                                </div>

                            </div>
                        </div>
                        <div class="xl-field data-source" v-if="res.sourceName">
                            <FormItem label="来源" labelStyle="text-align: left;">
                                <span style="">{{res.sourceName}}</span>
                            </FormItem>
                        </div>
                    </div>
                </div>
                <div v-else class="xl-field-content">
                    <div class="field-items" style="padding: 12px 16px; width: 100%;">
                        您所查的是“<span class="hl-kw" style=" color: red; ">红名单人员</span>”。
                    </div>
                </div>
            </div>
        </div>
        <div v-if="module.itemTotal>defsize">
            <div class="data-title" v-if="showSize<module.itemTotal">
                <p class="change-show" @click="loadMore()">
                    <span class="word-blue-color">余下</span>
                    <span class="word-red-color">{{surplus}}</span>
                    <span class="word-blue-color">条内容</span>
                    <span class="el-icon-caret-bottom"></span>
                </p>
            </div>
            <div class="data-title" v-else>
                <p class="change-show" @click="up()">
                    <span class="word-blue-color">收起</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import field from '@/common/template/field'
import fieldUname from '@/common/template/field-uname'
import CustomImg from '@/common/template/CustomImg';
import FormItem from '@/common/template/xl-form-item'

export default {
  name: 'template-img',
  components: { field, CustomImg, FormItem, fieldUname },
  data() {
    return {
      imgPromise: [],
      defH: null,
      defaultImg: '../../assets/imgerror.png',
      size: this.defsize||2,
      currentSize: this.items.size,
      loading: false,
      full: false,
      show: this.detail,
      module: this.items,
      result: this.items.result
    }
  },
  props: ['items', 'params', 'detail', 'defsize'],
  watch: {
    items: {
      handler(nv, o) {
        if (nv && nv.result) {
          let i = 0;
          nv.result.forEach(r => {
            if (r.records)
              r.records.forEach(rec => {
                rec.index = i;
                i += 1;
              })
          });
          this.module = nv;
        }
        this.result = nv.result;
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    showSize() {
      return this.size;
    },
    surplus() {
      return this.module.itemTotal - this.size;
    }
  },
  methods: {
    pushPromise(post) {
      this.imgPromise.push(post);
    },
    // promiseImgs() {
    //   this.imgPromise.map((d) => {
    //     d();
    //   });
    //   this.imgPromise=[];
    // },
    renderer(item, field) {
      switch (field.field) {
      case 'AGE':
        return item[field.tableField] + '岁';
        break;
      default: {
        return item[field.tableField]
      }
      }
    },
    handle(item, index, result) {
      this.$emit('handle', {
        item, index, sourceTable: result.sourceTable
      })
    },
    error(event) {
      let img = event.srcElement;
      img.src = this.defaultImg;
      img.onerror = null;
    },
    up() {
      this.size = this.defsize||2;
    },
    reload() {
      this.size  = this.defsize||2;
      this.module.pageNo = 1;
      this.module.itemTotal = 0;
      this.module.result=null;
      this.full = false;
      this.result = null;
      this.loading = true;
      this.$axiosInstance({
        url: '/searchMore',
        method: 'get',
        resId: ResIds.resId_searchMore,
        params: {
          id: this.module.id,
          pageNo: this.module.pageNo,
          ...this.params
        },
      }).then(result => {
        let { data, code } = result.data;
        if (code === 200) {
          this.currentSize =data[0].size;
          console.info(this.module)
          this.module.result = data[0].result;
          this.module.itemTotal = data[0].itemTotal;
        }
        this.loading = false;
      });
    },
    loadMore(call) {
      if (this.full === false) {
        // this.module.size 当前页数量
        if (this.currentSize - this.size > 0) {
          if (this.size+6>= this.currentSize) {
            this.size+=this.currentSize-this.size;
          } else {
            // 默认增加6条记录
            this.size += 6;
          }
        } else {
          this.$axiosInstance({
            url: '/searchMore',
            resId: ResIds.resId_searchMore,
            method: 'get',
            params: {
              id: this.module.id,
              pageNo: this.module.pageNo + 1,
              ...this.params
            },
          }).then(result => {
            let { data, code } = result.data;
            if (code === 200) {
              data[0].result.forEach(d => {
                this.result.push(d);
              });
              this.currentSize = data[0].size;
              this.size+=this.currentSize;
              this.module.pageNo += 1;
              if (this.size >= this.module.itemTotal) {
                this.full = true;
              }
            }
            this.$nextTick(() => {
              this.defH = this.$refs['module-content'].clientHeight;
            });
            if (call) call();
          });
        }
      } else {
        this.size = this.module.itemTotal;
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.defH = this.$refs['module-content'].clientHeight;
      // this.promiseImgs();
    });
  }
}
</script>

<style scoped>

</style>
